<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .box {
            width: 800px;
            height: 500px;
            position: relative;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .screen {
            width: 800px;
            height: 500px;
            position: relative;
            overflow: hidden;
        }
        .screen ul {
            width: 4800px;
            height: 500px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .screen ul li {
            list-style: none;
            float: left;
        }
        .screen ol {
            position: absolute;
            left: 50%;
            top: 470px;
            transform: translate(-50%,0);
        }
        .screen ol li {
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: #eee;
            float: left;
            margin-right: 10px;
        }
        .screen ol li.current {
            background-color: red;
        }
        .arr{
            display: none;
        }
        .left {
            position: absolute;
            top: 40%;
            left: 10px;
        }
        .right {
            position: absolute;
            top: 40%;
            right: 10px;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="screen">
            <ul>
                <li><a href="javascript:void(0)"><img src="slidepic1.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="slidepic2.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="slidepic3.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="slidepic4.jpg" alt=""></a></li>
                <li><a href="javascript:void(0)"><img src="slidepic5.jpg" alt=""></a></li>
            </ul>
            <ol>
            </ol>
        </div>
        <div class="arr">
            <div class="left"><a href="javascript:void(0)"><img src="prev.png" alt=""></a> </div>
            <div class="right"><a href="javascript:void(0)"><img src="next.png" alt=""></a></div>
        </div>
    </div>
    <script src='../common.js'></script>
    <script>
        // 获取元素
        var box =  document.getElementsByClassName('box')[0];
        var screen = box.children[0];
        var arr = box.children[1];
        var ul = screen.children[0];
        var ol = screen.children[1];
        var left = arr.children[0];
        var right = arr.children[1];
        //根据图片的数量,生成对应数量的小圆点
        for(var i = 0; i < ul.children.length; i++) {
            var li = document.createElement('li');
            ol.appendChild(li);
            li.setAttribute('index',i);
            if(i == 0) {
                li.className = 'current';
            }
        }
        //注册事件
        var index = 0; //记录图片当前位置
        //1,放入box显示左右箭头
        box.addEventListener('mouseover',function(){
            arr.style.display = 'block';
            clearInterval(timeID)
        },false)
        //2,移出box,箭头消失
        box.addEventListener('mouseout',function(){
            arr.style.display = 'none';
            timeID = setInterval(function(){
                right.click()
            },2000)
        })
        //克隆第一张图片,放于最后,以便无缝衔接
        var liClone = ul.children[0].cloneNode(true);
        ul.appendChild(liClone);
        // 3.点击向右箭头,图片切换,并且小圆点也跟着切换
        right.onclick = function(){
            if(index >= ul.children.length-1) {
                ul.style.left = '0'
                index = 0;
            }
            index++;
            animationAll(ul,{left:-index*screen.offsetWidth})
            for(var i = 0; i < ol.children.length; i++) {
                if(index == i) {
                    ol.children[i].className = 'current';
                } else {
                    ol.children[i].className = '';
                }
            }
            if(index == ul.children.length -1) {
                ol.children[0].className = 'current';
            }
        }
        //4,当点击向左时
        left.onclick = function() {
            if(index <= 0 ) {
                ul.style.left = -ul.offsetWidth-screen.offsetWidth
                index = ul.children.length-1
            }
            index--;
            animationAll(ul,{left:-index*screen.offsetWidth})
            for(var i = 0; i < ol.children.length; i++) {
                if(index == i) {
                    ol.children[i].className = 'current';
                } else {
                    ol.children[i].className = '';
                }
            }
            if(index == ul.children.length -1) {
                ol.children[0].className = 'current';
            }
        }
        //点击小圆点的时候,切换到对应图片
        ol.onclick = function(e) {
            if(ul.offsetLeft == -(ul.offsetWidth-screen.offsetWidth)){
                ul.style.left = '0';
            }
            index = e.target.getAttribute('index');
            animationAll(ul,{left:-index*screen.offsetWidth})
            for(var i = 0; i < ol.children.length; i++) {
                if(index == i) {
                    ol.children[i].className = 'current';
                } else {
                    ol.children[i].className = '';
                }
            }
        }
        //无限轮播
        var timeID = setInterval(function(){
            right.click()
        },2000)
    </script>
</body>
</html>